<template>
	<div class="chooseStores">
		<title-header :title="title"></title-header>
		<search :places="placeHolder" class="search">
			<div class="" slot="left">
			</div>
			<div class="" slot="right">
			</div>
		</search>
		<div class="title">热门</div>
		<ul class="layout">
			<li>北京</li>
			<li>上海</li>
			<li>成都</li>
			<li>重庆</li>
			<li>上海</li>
			<li>成都</li>
			<li>重庆</li>
		</ul>
		<div class="title">字母 </div>
		<ul class="layout width17">
			<li v-for="(value,index) in letters">
				<a :href="'#'+index">{{value}}</a>
			</li>
		</ul>
		<div class="place">
			<template v-for="(value,index) in letters">
				<div class="title" :id='index'>{{value}}</div>
				<group class="marginTopNegative">
					<div v-if="initPlaces(value)[0]">
						<cell 
						v-for="(item,index) in initPlaces(value)[0].place" 
						:title="item" 
						:key="index"></cell>
					</div>
				</group>
			</template>
		</div>
	</div>
</template>

<script>
import { Group, Cell } from 'vux'
import TitleHeader from '@/components/titleHeader.vue'
import Search from '@/components/search.vue'
export default {
  components: {
    Group,
    Cell,
    TitleHeader,
    Search
  },
  data() {
    return {
      title: '城市选择',
      placeHolder: '搜索目的地',
      letters: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G'
      ],
      places: [
        {
          id: 'A',
          place: ['阿泰克', '阿里山按时', '安庆', '啊腐干豆腐打发']
        },
        {
          id: 'B',
          place: ['白色', '包头', '北海']
        },
        {
          id: 'C',
          place: ['长春', '朝阳', '成都', '长沙']
        },
        {
          id: 'D',
          place: ['大连', '大同', '大理']
        }
      ]
    }
  },
  methods: {
    initPlaces(val) {
      return this.places.filter((value, index) => {
        // if(value.id==val)
        return value.id == val
      })
    }
  },
}
</script>

<style scoped>
.chooseStores {
  overflow-x: hidden;
}
.header {
  width: 100%;
  height: 2.5rem;
  color: gray;
  font-size: 0.8rem;
  background: #f0f0f0;
  text-align: center;
}

.marginTopNegative {
  margin-top: -20px;
}
.title {
  width: 100%;
  height: 1.5rem;
  background: #eaeaea;
  font-size: 0.8rem;
  line-height: 1.5rem;
  padding-left: 2.5%;
}
.layout {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.layout li {
  width: 21%;
  height: 30px;
  background: #eaeaea;
  float: left;
  text-align: center;
  margin: 0.5rem 0;
  line-height: 30px;
}
.layout li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #000000;
}
.width17 li {
  width: 17%;
}
</style>